@import '../../node_modules/reset-css/reset.css';

body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.myMarkup {
  color: #FFD300;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0px 0px 0 #b89800,
    1px -1px 0 #b39400,
    2px -2px 0 #ad8f00,
    3px -3px 0 #a88b00;
  position: absolute;
  animation: animateShadow 2s linear infinite;
}

@keyframes animateShadow {
  0% {
    font-size: 20px;
  }

  25% {
    font-size: 22px;
  }

  50% {
    font-size: 24px;
  }

  75% {
    font-size: 22px;
  }

  100% {
    font-size: 20px;
  }
}

.stateRecordWrap {
  padding: 20px;
  background: #ffffff;
  border-radius: 4px;
  position: fixed;
  left: 10px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  box-shadow: 8px 8px 12px #888888;
}

.stateRecordWrap .recordWrapBtn {
  cursor: pointer;
}

.stateRecordWrap .recordWrapBtn:not(:last-child) {
  margin-bottom: 6px;
}

.crosshair {
  cursor: crosshair !important;
}